<template>
	<view class="container">
		<view class="wrapper">
			<scroll-view class="scroll" :scroll-y="true" :show-scrollbar="false">
				<view style="position: absolute;top: 0px;width: 100%;height: 150px;z-index: 1; background: linear-gradient(#155CCF,#155CCF, #f1f1f1);"></view>
				<view style="position: relative;z-index: 2;padding-bottom: 70px;">
					<view style="display: flex;padding: 40rpx 30rpx 30rpx 30rpx;">
						<view style="width: 100%;">
							<view style="font-size: 42rpx;font-weight: 300;color: #ffffff;">全民运动健康商家版</view>
							<view style="padding-top: 5px;">
								<text style="margin-right:5px; background-color: #0544ab;padding:5rpx 15rpx;font-size: 24rpx;border-radius: 4px;color: #C1CAE5;">健康管理</text>
								<text style="background-color: #0544ab;padding:5rpx 15rpx;font-size: 24rpx;border-radius: 4px;color: #C1CAE5;">体育赛事</text>
							</view>
						</view>
					</view>
					<view style="padding: 0rpx 30rpx 30rpx 30rpx;">
						<view style="background-color: #ffffff;border-radius: 12rpx;margin-top: 15rpx;box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.12)">
							 <!-- 统计 -->
							 <view>
								<view style="border-bottom: 1px solid #e5e5e5;padding: 10rpx 0px;">
									<u-tabs :list="headerSum.tabsData" :scrollable="false" lineHeight="8" :current="headerSum.tabCurrent" @change="headerTabsChnage" ></u-tabs>
								 </view>
								 <view style="padding: 20rpx; ">
									 
									 <u-grid :border="true" :col="2">
										 <u-grid-item @click="reservationListLink()">
											 <view style="text-align: center;padding: 20rpx;">
											 	<view style="font-size: 31rpx;color: #666666;">场地预约</view>
											 	<view style="font-size: 30rpx;    padding-top: 10rpx;">{{ headerSum.data.reservationNum }} 场次</view>
											 </view>
										 </u-grid-item>
										 <u-grid-item @click="operatingAmountLink()">
										 	<view style="text-align: center;padding: 20rpx;">
										 		<view style="font-size: 31rpx;color: #666666;">营业金额</view>
										 		<view style="font-size: 30rpx;    padding-top: 10rpx;">{{ headerSum.data.turnover }} 元</view>
										 	</view>
										 </u-grid-item>
										 <u-grid-item @click="reservationWriteOff()">
										 	<view style="text-align: center;padding: 20rpx;">
										 		<view style="font-size: 31rpx;color: #666666;">订单核销</view>
										 		<view style="font-size: 30rpx;    padding-top: 10rpx;">{{ headerSum.data.verificationNum }} 笔</view>
										 	</view>
										 </u-grid-item>
										 <u-grid-item >
										 	<view style="text-align: center;padding: 20rpx;">
										 		<view style="font-size: 31rpx;color: #666666;">核销金额</view>
										 		<view style="font-size: 30rpx;    padding-top: 10rpx;">{{ headerSum.data.verificationAmount }} 元</view>
										 	</view>
										 </u-grid-item>
									 </u-grid>
								 </view>
							 </view>
						</view>
						
						<!-- 您拥有的球馆 -->
						<view v-if="venueItem" style="background-color: #ffffff;border-radius: 12rpx;margin-top: 15px;box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.12)">
							<view style="padding:20rpx;" @click="onLink('/pagesWorkbenches/pages/venue/venue')">
								<view style="display: inline-flex;">
									
									<u-avatar size="120" :src="venueItem.hostImage"></u-avatar>
									<view style="padding-left: 30rpx;width: 100%;">
										<view style="font-size: 34rpx;font-weight: 600;color: #333333;line-height:50rpx;">{{ venueItem.venueName }}</view>
										<view style="font-size: 28rpx;color: #666666;line-height:40rpx;">
											地址：{{ venueItem.address }}
										</view>
										<view style="font-size: 28rpx;color: #666666;line-height:40rpx;">
											浏览：{{ venueItem.browse }}
										</view>
									</view>
								</view>
							</view>
						</view>
						
						
						<!-- 场地预约情况 -->
						<view class="reservation">
							<view class="title">
								场地预约情况
							</view>
							<view class="daysDates">
								<view v-for="(item, index) in daysDates" :key="index" @click="daysDatesClick(index)">
									<view :class="index == daysDatesCurrent.index?'timesCurr':'times' ">
										<view class="week">{{ (index==0?'今日':item.weekData) }}</view>
										<view class="date">{{ item.dateStr }}</view>
										<view class="desc">{{ item.desc }}</view>
									</view>
								</view>
							</view>
							
							<!-- 场地预约 -->
							<view v-if="spetype.length > 0" class="venueLocation" style="box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.12)">
								<view class="tabs">
									<u-tabs :activeStyle="{fontSize: '30rpx'}" :inactiveStyle="{fontSize: '30rpx'}" :list="spetype" keyName="typeName" lineHeight="8" @change="spetypeTabsChange" ></u-tabs>
								</view>
								<view class="locationFlex">
									<!-- 左侧场馆分类 -->
									<view class="locationTags">
										<view v-for="(item, index) in venueLocationList" :key="index" :class="index==locationCurrentIndex?'locationItemCur':'locationItem'" @click="locationClick(index)">{{ item.locationName }}</view>
									</view>
									<!-- 右侧已预约情况 -->
									<view class="rightYuyue" >
										<view>
											<view v-if="locationCostList.length>0"
												class="locationYuyue" 
												v-for="(item, costIndex ) in locationCostList" :key="costIndex" 
												:style="{'background': (item.enable==0 && (!item.isReservation)?'#ffffff':'#e8e8e8') }"
											>
												<view>{{ item.startTime.substr(0,5) }}-{{ item.endTime.substr(0,5) }}</view>
												<view>
													<text style="font-size: 20rpx;color: red;">￥</text>
													<text style="font-size: 25rpx;color: red;">{{ item.amount }}</text>
												</view>
												<view>
													<text style="color: green;" v-show="item.enable==0 && (!item.isReservation)">可预约</text>
													<text style="color: #666666;" v-show="item.enable==1">已关闭</text>
													<text style="color: #666666;" v-show="item.enable==0 && item.isReservation">已预约</text>
												</view>
											</view>
											<view v-if="locationCostList.length<=0" >
												<view style="text-align: center;">
													<image class="notdataImage" src="../../../../static/image/notdata.png"></image>
													<view class="notdataText">暂无场地预约</view>
												</view>
											</view>
											
										</view>
										
									</view>
								</view>
							</view>
							<!-- 暂无场馆预约 -->
							<view v-else>
								<view class="notdata" style="box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.12);">
									<image class="notdataImage" src="../../../../static/image/notdata.png"></image>
									<view class="notdataText">暂无场地预约</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//球馆数据
				venueItem: null,
				headerSum:{
					//0今日，1近七天，2本月数据
					tabCurrent: 0,
					params: {
						startDate: '',
						endDate: ''
					},
					tabsData: [
						{
							name: '今日数据'
						}, {
							name: '近7天'
						}, {
							name: '本月数据'
						}
					],
					//展示数据
					data: {
						reservationNum: 0,
						turnover: "0.00",
						verificationAmount: "0.00",
						verificationNum: 0,
					}
				},
				cycle: 0,
				//场馆场地运动类型
				spetype: [],
				//预约查看tab所选运动类型场馆
				locationTypeValue:null,
				//场地预约最近7天的日期
				daysDates: [],
				//预约日期当前选择哪个序列和日期值
				daysDatesCurrent: {
					//当前选择的序号
					index: 0,
					//序号选择的日期
					date: null
				},
				//左侧场地集合
				venueLocationList: [],
				//已选场地的序号
				locationCurrentIndex: 0,
				//场地各预约时间
				locationCostList: []
			}
		},
		methods: {
			async venueInitData(){
				const that = this;
				//获取当前登陆人的场馆
				var venueResult = await this.merchantVenue();
				if(Object.keys(venueResult).length === 0){
					//默认给0，防止查订单时出现查全部的情况
					uni.setStorageSync('venueId', 0);
					uni.showModal({
					   title: '您暂未申请场馆',
					   content: '是否立即到工作台中申请场馆？',
					   showCancel: true,
					   success: function (res) {
						   if (res.confirm) {
							   that.onLink('/pagesWorkbenches/pages/venue/venue');
						   }
					   }
					});
					return false;
				}
				//状态为1球馆生效
				if(venueResult.status == 1){
					const venueItem = venueResult;
					//因首页无特定字段主图，从img中提取第一张图作为主图展示
					var hostImage = '';
					if(venueItem.img) {
						hostImage = venueItem.img.split(",")[0];
					}
					//选定的主图
					venueResult.hostImage = hostImage;
					//将数据放入对象中可调用
					this.venueItem = venueResult;
					//将当前的场馆主ID放入缓存
					uni.setStorageSync('venueId', venueResult.id);
					//调用场馆运营统计数据，默认今日数据
					this.headerSum.params = this.$utils.homeTabsDate(this.headerSum.tabCurrent);
					//调用场馆运营统计
					await this.homeInfo();
					
					//获取当天和以后7天的日期和星期
					this.last7DaysDates();
					//获取场馆的所有场地的场地类型
					var locationType = await this.venueLocationType();
					//默认给第一个场地类型
					this.locationTypeValue = locationType[0].typekey;
					//根据场地类型，查看场地集合
					await this.venueLocationData();
					//加载预约时间段
					await this.locationCostData();
					
				} else if(venueResult.status == 0) {
					uni.setStorageSync('venueId', 0);
					uni.$u.toast("您申请的球馆正在审核中！")
				} else if(venueResult.status == 2) {
					uni.setStorageSync('venueId', 0);
					uni.showModal({
					   title: '您的场馆审核未通过',
					   content: '是否立即到工作台中场馆管理处理？',
					   showCancel: true,
					   success: function (res) {
						   if (res.confirm) {
							   that.onLink('/pagesWorkbenches/pages/venue/venue');
						   }
					   }
					});
				}
			},
			//获取场地类型
			venueLocationType(){
				return new Promise((resolve, reject) => {
					const params = {
						venueId: this.venueItem.id
					};
					this.$request({
						url: `/blade-merchant-app/merchant-app/venue-location/getType`,
						type: 'GET',
						data: params
					}).then(res => {
						this.spetype = res.data;
						resolve(res.data); // 操作成功，处理结果
					}).catch(err =>{
						reject(err); 
					})
				});
			},
			//获取场馆信息
			merchantVenue(){
				return new Promise((resolve, reject) => {
					this.$request({
						url: `/blade-merchant-app/merchant-app/venue/getVenue`,
						type: 'GET'
					}).then(res => {
						resolve(res.data); // 操作成功，处理结果
					}).catch(err =>{
						reject(err); 
					})
				});
			},
			//顶部今日数据、近七天、本月数据切换
			async headerTabsChnage(e) {
				this.headerSum.tabCurrent = e.index;
				const { startDate, endDate } = this.$utils.homeTabsDate(e.index);
				this.headerSum.params = {
					startDate: startDate, endDate: endDate
				}
				
				await this.homeInfo();
			},
			//场地预约情况的日期点击事件，切换日期
			async daysDatesClick(index){
				this.daysDatesCurrent.index = index;
				this.daysDatesCurrent.date = this.daysDates[index].date;
				//场地选择默认0
				this.locationCurrentIndex = 0;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				//加载场地数据
				await this.venueLocationData();
				//加载预约时间段
				await this.locationCostData();
				uni.hideLoading();
			},
			//场地类型切换改变事件
			async spetypeTabsChange(e){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.locationTypeValue = this.spetype[e.index].typekey;
				//场地序号改成首行
				this.locationCurrentIndex = 0;
				//加载场地数据
				await this.venueLocationData();
				//加载预约时间段
				await this.locationCostData();
				uni.hideLoading();
			},
			//左侧场地点击
			async locationClick(index){
				this.locationCurrentIndex = index;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				//加载预约时间段
				await this.locationCostData();
				uni.hideLoading();
			},
			//场馆主运营数据
			homeInfo(){
				return new Promise((resolve, reject) => {
					const params = {
						venueId: this.venueItem.id
					};
					params.startDate = this.headerSum.params.startDate;
					params.endDate = this.headerSum.params.endDate;
					params.flag = 0;//0 查首页 1查财务
					this.$request({
						url: `/blade-merchant-app/merchant-app/venue/manager/homeInfo`,
						type: 'GET',
						data: params
					}).then(res => {
						//展示数据
						this.headerSum.data = res.data;
						resolve(res.data); // 操作成功，处理结果
					}).catch(err =>{
						reject(err); 
					})
					
				});
			},
			//获取场馆及场馆类型的场地
			venueLocationData(){
				return new Promise((resolve, reject) => {
					const params = {
						venueId: this.venueItem.id,
						locationType: this.locationTypeValue,
						type: ''
					};
					this.$request({
						url: `/blade-merchant-app/merchant-app/home-page/location`,
						type: 'GET',
						data: params
					}).then(res => {
						this.venueLocationList = res.data;
						resolve(res.data); // 操作成功，处理结果
					}).catch(err =>{
						reject(err); 
					})
					
				});
			},
			//按场地Id和当前所选日期查询当天的预约订单及情况
			locationCostData(){
				return new Promise((resolve, reject) => {
					if(this.venueLocationList.length<=0) {
						this.locationCostList = [];
						resolve([]); // 操作成功，处理结果
					} else {
						const params = {
							locationId: this.venueLocationList[this.locationCurrentIndex].id,
							reservationDate: this.daysDatesCurrent.date
						};
						this.$request({
							url: `/blade-merchant-app/merchant-app/home-page/location-cost`,
							type: 'GET',
							data: params
						}).then(res => {
							this.locationCostList = res.data;
							resolve(res.data); // 操作成功，处理结果
						}).catch(err =>{
							reject(err); 
						})
					}
				});
			},
			//最近7天数据重组
			last7DaysDates(){
				const { dates, daysOfWeek } = this.$utils.getLast7DaysDates();
				var daysDates = [];
				dates.forEach((item, index) => {
					var da = {};
					da.date = item;
					da.dateStr = item.split("-")[1]+'月'+item.split("-")[2]+'日';
					da.desc = '';
					
					var week = daysOfWeek[index];
					var weekData = (week==0?'星期日':week==1?'星期一':week==2?'星期二':
					  week==3?'星期三':week==4?'星期四':week==5?'星期五':week==6?'星期六':'')
					da.week = daysOfWeek[index];
					da.weekData = weekData;
					daysDates.push(da);
				})
				this.daysDates = daysDates;
				this.daysDatesCurrent.date = daysDates[0].date;
			},
			//场地预约入口
			reservationListLink(){
				var startDate =  this.headerSum.params.startDate;
				var endDate = this.headerSum.params.endDate;
				this.onLink('/pagesBusiness/pages/homeVenue/reservationList/reservationList?startDate='+(startDate.substr(0,10))+'&endDate='+(endDate.substr(0,10)))
			},
			//营业金额入口
			operatingAmountLink(){
				var startDate =  this.headerSum.params.startDate;
				var endDate = this.headerSum.params.endDate;
				var status = '2';
				this.onLink('/pages/order/venueReservation/venueReservation?startDate='+(startDate.substr(0,10))+'&endDate='+(endDate.substr(0,10))+'&status='+status)
			},
			//订单核销入口
			reservationWriteOff(){
				var startDate =  this.headerSum.params.startDate;
				var endDate = this.headerSum.params.endDate;
				this.onLink('/pagesBusiness/pages/homeVenue/reservationWriteOff/reservationWriteOff?startDate='+(startDate.substr(0,10))+'&endDate='+(endDate.substr(0,10)))
			},
			onLink(url) {
				uni.navigateTo({ url: url })
			},
			//打开扫一扫
			openScanCode() {
			  uni.scanCode({
				success: (res) => {
				  console.log('扫码结果：' + res.result);
				  // 扫码成功后的操作
				},
				fail: (err) => {
				  console.error('扫码失败：' + err);
				}
			  });
			}
		}
	}
</script>

<style lang="scss">
page {
		height: 100%;
		background: #f1f1f1;
		font-weight: 400;

		.container {
			display: flex;
			flex-direction: column;
			height: 100%;
			overflow: hidden;

			.wrapper {
				flex: 1;
				height: 100%;
				overflow: hidden;
				.scroll {
					height: 100%;
					
					
					
					.reservation {
						padding:20rpx 0rpx 10rpx 0rpx;
						
						.title {
							line-height: 70rpx;font-size: 35rpx;font-weight: 500;
						}
						.daysDates {
							width: 100%;overflow: auto;display: flex;
							
							.times {
								width: 150rpx;border: 1px solid #e5e5e5;background-color: #ffffff;padding: 10rpx;border-radius: 9rpx;margin-right: 10rpx;text-align: center;
							
								.week {
									font-size: 30rpx;color: #333333;
								}
								.date {
									font-size: 23rpx;color: #666666;
								}
								.desc {
									font-size: 23rpx;color: #888888;
								}
							}
							.timesCurr {
								width: 150rpx;border: 1px solid #155ccf;background-color: #ffffff;padding: 10rpx;border-radius: 9rpx;margin-right: 10rpx;text-align: center;
							
								.week {
									font-size: 30rpx;color: #155ccf;
								}
								.date {
									font-size: 23rpx;color: #3d76d2;
								}
								.desc {
									font-size: 23rpx;color: #89ace4;
								}
							}
							
							
						}
						.venueLocation {
							background-color: #ffffff;border-radius: 12rpx;margin-top: 10rpx;
						
							.tabs {
								border-bottom: 2rpx solid #e5e5e5;
							}
							.locationFlex {
								display: flex;
								
								.locationTags {
									width: 200rpx;border-right: 1px solid #e5e5e5;line-height: 40rpx;text-align: center;
								
									.locationItem {
										border-bottom: 1px solid #e5e5e5;color: #333333;line-height: 30px;font-size: 30rpx;
									}
									.locationItemCur {
										border-bottom: 1px solid #e5e5e5;color: #155ccf;line-height: 30px;font-size: 30rpx;
									}
								}
								
								.rightYuyue {
									padding: 10rpx;width: 100%;
									
									.locationYuyue {
										width: 150rpx; float: left;border: 1px solid #e5e5e5;margin: 0rpx 10rpx 10rpx 0rpx;text-align: center; font-size: 24rpx;
									}
									
								}
								
							}
						
						}
						
					}
					
					
				}	
			}
		}
	}			
	.notdata {
		background-color: #ffffff;border-radius: 12rpx;margin-top: 10rpx;text-align: center;padding: 30rpx;
	}	
	.notdataImage {
			width: 200rpx;height: 200rpx;
	}
	.notdataText{
		font-size: 28rpx;color: #666666;
	}
	
</style>
